<template>
  <view class="food-plan">
    <view class="content"
      >{{foodPlan.summary}}</view
    >
    <view class="diet-principle">
      <plain-card>
        <template v-slot:icon>
          <view class="food-plan-icon icon-food-plan-orange"></view>
        </template>
        <template v-slot:title>
          <text>{{dietPrincipleParagraphList.title}}</text>
        </template>
        <template v-slot:content>
          <paragraph-list :paragraphList="dietPrincipleParagraphList.items" />
        </template>
      </plain-card>
    </view>
    <view class="recommend-food">
      <plain-card>
        <template v-slot:icon>
          <view class="food-plan-icon icon-food-plan-green"></view>
        </template>
        <template v-slot:title>
          <text>推荐食物</text>
        </template>
        <template v-slot:content>
          <paragraph-list :paragraphList="recommendFoodParagraphList" />
        </template>
      </plain-card>
    </view>
    <view class="carefully-food">
      <plain-card>
        <template v-slot:icon>
          <view class="food-plan-icon icon-food-plan-orange"></view>
        </template>
        <template v-slot:title>
          <text>谨慎选择</text>
        </template>
        <template v-slot:content>
          <text>{{ carefullyFoodContent }}</text>
        </template>
      </plain-card>
    </view>
    <button open-type="contact" class="button-plain-purple">联系健管获得详细食谱</button>
  </view>
</template>

<script lang="ts">
import PlainCard from "../components/plain-card.vue";
import ParagraphList from "./component/paragraph-list.vue";
export default {
  components: {
    plainCard: PlainCard,
    paragraphList: ParagraphList
  },
  props: {
    foodPlan: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    dietPrincipleParagraphList() {
      return this.foodPlan.dietPrincipleParagraphList
    },
    recommendFoodParagraphList() {
      return this.foodPlan.recommendFoodParagraphList
    },
    carefullyFoodContent() {
      return this.foodPlan.carefullyFoodContent
    }
  },
  data() {
    return {
      // dietPrincipleParagraphLists: [
      //   {
      //     title: "低GI",
      //     content:
      //       "通常GI低于55被称为低GI食品，这类食物的消化吸收作用相对较慢，让血糖值维持稳定。"
      //   },
      //   {
      //     title: "低GL",
      //     content:
      //       "GL值更能客观反映一餐食物对餐后血糖的影响，GL值小于10为低血糖负荷。"
      //   },
      //   {
      //     title: "低钠",
      //     content:
      //       "高钠高盐饮食是高血压发生的重要影响因素，会增加糖尿病及脑卒中的发病风险。"
      //   },
      //   {
      //     title: "低饱和脂肪酸",
      //     content:
      //       "膳食中的饱和脂肪酸摄入量与胰岛素抵抗正相关，会明显影响血脂水平，是动脉粥样硬化的重要因素。"
      //   },
      //   {
      //     title: "高纤维",
      //     content:
      //       "大多数的膳食纤维都具有低的升糖指数，提高一些富含膳食纤维食物的摄入量，可以延迟葡萄糖从小肠吸收，减慢血糖水平和胰岛素的反应。"
      //   }
      // ],
      // recommendFoodParagraphLists: [
      //   {
      //     title: "蔬菜类",
      //     content: "绿叶蔬菜（高膳食纤维）、芦笋、黄瓜、西红柿。"
      //   },
      //   {
      //     title: "水果类",
      //     content:
      //       "樱桃（低GI:22)、李子（低GI:24)、柚子（低GI:25)、苹果（低GI:36)、西梅（低GI:39)。"
      //   },
      //   {
      //     title: "主食类",
      //     content:
      //       "黑米粥（低GI:42)、燕麦饭（低GI:42)、山药（低GI:51)、苦荞麦面（低GI:53)、芋头。"
      //   },
      //   {
      //     title: "优质蛋白",
      //     content:
      //       "牛肉、鸡胸肉、鲈鱼、罗非鱼、鸡蛋、鹌鹑蛋纯牛奶、无糖酸奶、无糖豆浆、核桃、巴旦木。"
      //   },
      //   {
      //     title: "食用油",
      //     content: "茶油、橄榄油、亚麻籽油。"
      //   }
      // ],
      // carefullyFoodContents:
      //   "白米饭（高GI:90)、白面包（高GI:88)、土豆泥（高GI:87)、馒头（高GI:85)、龙须面（高GI:81.6)、菠萝蜜（高GI:75)、西瓜（高GI:72)"
    };
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
